<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>expression</title>

		<style></style>
	</head>

	<body>
		<div class="view">
		</div>
	</body>
	<script type='module'>
		import{Nodom,Module,Util} from '/dist/nodom.esm.js'
		class Module1 extends Module{
			template(){
				return `
					<div>
						<h3>算术运算</h3>
						{{20*((price+2)*discount)}}
						<h3>字符串拼接</h3>
						<div>日期：{{year + '年' + month + '月'}}</div>
						<div>路径：{{'/'+'path'+'/'+url}}</div>
						<h3>多级数据</h3>
						<div>多级数据：{{ac.age.as}}</div>
						<h3>方法属性混合</h3>
						<div>折扣：{{cacDis(price*discount)}}</div>
						<div>描述：{{30 + addStr('hello' + desc) + 20}}</div>
						<div>随机折扣:{{(Math.random()*price).toFixed(1)}}</div>
						<div>当前日期是:{{genDate(date1)}}</div>
						<div>当前日期时间是:{{genDate(date1,1)}}</div>
						<div>当前时间是:{{genDate(date1,2)}}</div>
						<div>数组求和:{{sum(...arr)}}</div>
						<div>
							{{genDate(new Date().getTime())}} 是否为工作日：<span x-if={{new Date().getDay()<6}}>true</span>
						</div>
						<div>货币：¥{{(price*discount).toFixed(1)}}</div>
						
						<h3>Math原生方法</h3>
						<div>价格：{{Math.round(price * discount) + 'hello'}}</div>
						<div>计算：{{cac(1,2)+ (Math.round((price * discount))).toFixed(1) + 1}}</div>
						
						<h3>Object原生方法</h3>
						<div x-if={{Object.keys(goods).length>0}}>商品列表存在则显示</div>
						<h3>字符串方法</h3>
						<div>转换为小写字母:{{name.toLowerCase()}}</div>
						<div>转换为大写字母:{{name.toUpperCase()}}</div>
						
						<h3>其它</h3>
						<div>{{!true}}</div>
						<div>判断数组中有没有‘num’: <span x-if={{new Set(arr).has(num)}}>true</span></div>
						<div x-if={{price>30 && discount !== undefined}}>是低价商品并且还有折扣</div>
						<div>instanceof用法:{{arr instanceof Array}}</div>
						<div>{{num+1}}</div>
						<div>三目运算：{{num>0?1:0}}</div>
						<div>对象判断：{{{x:1,yyy:2}.constructor.name === 'Object'}}</div>
						<div>数组方法：{{arr.join(',')}}</div>
						<div>使用this：{{desc + ' ' + this.state}}</div>
						<div>扩展运算-数组求和：{{sum(...arr)}}</div> 
						<div>typeof：{{typeof arr}}</div> 
					</div>
				`
			}
			data(){
				return {
					rows: [
						{
							name: "yang",
							addr: "chengdu",
						},
						{
							name: "zhangs",
							addr: "mianyang",
						},
						{
							name: "nodom",
							addr: "luoyang",
						},
						{
							name: "hallo",
							addr: "beijing",
						},
					],
					year:2022,
					month:2,
					$num: 3,
					progress: 1.321,
					name: "nodom",
					str: "hello nodom!",
					notime: "2021",
					num: 1,
					price: 236.83,
					discount: 0.12,
					desc: "this is expression",
					goods: {
						juice: ["orange"],
					},
					date1: new Date().getTime(),
					url: "home",
					state:'from root model',
					arr: [1, 2, 3, 4, 5, 6, 2, 3, 1, 2, 5],
					ac: {
						age: {
							as: 1,
						},
					}
				}
			}	
			
			cacDis(data){
				return Math.round(data * 10);
			}
			addStr(data){
				return data;
			}
			sum(arg) {
				let sum = 0;
				for (let i = 0; i < arguments.length; i++) {
					sum += arguments[i];
				}
				return sum;
			}
			cac(a, b) {
				return a + b;
			}
			genDate(date1,flag){
				if(flag === 1){ //日期时间
					return Util.formatDate(date1,'yyyy-MM-dd HH:mm:ss');	
				}else if(flag === 2){  //时间
					return Util.formatDate(date1,'HH:mm:ss');	
				}else{ //日期
					return Util.formatDate(date1,'yyyy-MM-dd');
				}
			}
			sortArr(arr){
				return arr.sort((a,b)=> {
					if(a.name> b.name){
						return 1;
					}
					return -1;
				});
			}
		}
		
		Nodom.app(Module1,'div');


	</script>
</html>
